<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>【西安web前端招聘】2019年西安web前端最新人才招聘信息-BOSS直聘</title>
    <link rel="shortcut icon" href="./src/images/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./src/style/main.css">
</head>

<body>
    <div id="list">
            <div class="listHeader">
                    <form action="" class="listTop flex">
                        <img src="./src/images/icon-home.png" alt="">
                        <div class="topInner flex ">
                            <input type="text" value="web前端">
                            <span>&times;</span>
            
                        </div>
                        <button class="search">搜索</button>
                    </form>
            
            
                </div>
            
                <div class="listFliter flex">
                    <dl class="active1" v-for="(item, index) in filter" :key="index">
                        <dt>{{item.name}}</dt>
                        <dd>
                            <ul>
                                <li class="active" v-for="(check, index) in item.checked" :key="index">{{check}}</li>
                               
                            </ul>
                        </dd>
                    </dl>
                    
                </div>
            
            
                <ul class="jobList" >
                    <li v-for="(item, index) in joblist" :key="index">
                        <a href="" class="jobItem flex">
                            <img :src="item.icon" alt="">
                            <div class="company">
                                <div class="jobInfo flex">
                                    <span class="jobDesc">{{item.job_name}}</span>
                                    <span class="salary">{{item.salary}}</span>
                                </div>
                                <div class="companyName">{{item.comp_name}}</div>
                                <div class="jobProps">
                                    <span v-for="(tag, index) in item.tags" :key="index">{{tag}}</span>
                                   
                                </div>
                            </div>
                        </a>
                    </li>
                    
                </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    var vm =new Vue({
        el:"#list",
        data:{
            joblist:[],
            filter:[]
        },
        created() {
            fetch('http://127.0.0.1:5501/src/api/joblist.json').then(function(res){
               return res.json()
            }).then(function (data) {
                vm.joblist = data
            }),
            fetch('http://127.0.0.1:5501/src/api/jobfilter.json').then(function(res){
                return res.json()
            }).then(function (data) {
                vm.filter = data
            })
        },

    })
    
    </script>
</body>

</html>